<template>
  <view class="my-bg" />
  <view class="my-box">
    <view class="my-wrapper app-container flex flex-column">
      <view class="my-page-title flex-shrink-0">我的</view>
      <view class="my-page__body flex-grow-1">
        <view class="user-avatar">
          <view class="avatar-img-box">
            <view class="avatar-img-bg flex flex-row justify-center align-center">
              <image class="avatar-img" :src="AvatarPng"></image>
            </view>
          </view>
          <view class="avatar-footer"></view>
        </view>
        <view class="my-card">
          <view class="my-card__inner flex flex-column">
            <view class="oa-logout flex-shrink-0 flex flex-row justify-end">
              <image class="oa-logout-image" :src="logoutPng"></image>
            </view>
            <view class="oa-username-display flex-shrink-0">{{ userInfo.displayName }}</view>
            <view class="oa-username-account flex-shrink-0">用户名称：{{ userInfo.name }}</view>
            <view class="oa-user-info flex-grow-1">
              <view class="oui-row flex flex-row justify-between">
                <view class="oui-label">
                  <image class="oui-label-icon" :src="mobilePng"></image>
                  手机号码
                </view>
                <view class="oui-value">{{ '暂无' }}</view>
              </view>
              <view class="oui-row flex flex-row justify-between">
                <view class="oui-label">
                  <image class="oui-label-icon" :src="emailPng"></image>
                  用户邮箱
                </view>
                <view class="oui-value">{{ userInfo.email || '暂无'}}</view>
              </view>
              <view class="oui-row flex flex-row justify-between">
                <view class="oui-label">
                  <image class="oui-label-icon" :src="deptPng"></image>
                  所属部门
                </view>
                <view class="oui-value">{{ '暂无' }}</view>
              </view>
              <view class="oui-row flex flex-row justify-between">
                <view class="oui-label">
                  <image class="oui-label-icon" :src="jobPng"></image>
                  所属岗位
                </view>
                <view class="oui-value">{{ '暂无' }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="current-sys flex-shrink-0">当前登录华信OA管理系统</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {storeToRefs} from "pinia";
import {useUserStore} from "@/stores";
import AvatarPng from '@/static/images/oa/avatar.png'
import logoutPng from '@/static/images/oa/logout.svg'
import mobilePng from '@/static/images/oa/mobile.svg'
import emailPng from '@/static/images/oa/email.svg'
import deptPng from '@/static/images/oa/deptment.svg'
import jobPng from '@/static/images/oa/job.svg'

defineOptions({ name: 'MyPage' })

const { userInfo } = storeToRefs(useUserStore())
</script>

<style scoped lang="scss">
$avatar-size: 95px;
@import 'src/styles/bg/myBg';

.my-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-image: $--oa-my-bg;
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}

.my-box {
  width: 100%;
  height: 100%;
  background: #EDF4FC;
  position: relative;

  .my-wrapper {
    z-index: 9;

    .my-page-title {
      font-size: 48rpx;
      font-weight: 500;
      line-height: normal;
      text-transform: lowercase;
      letter-spacing: 0em;
      color: #FFFFFF;
    }

    .my-page__body {
      padding-top: 37.5px;
      margin-top: 64rpx;
      overflow: auto;
      position: relative;

      .user-avatar {
        position: absolute;
        top: 0;
        left: calc(50% - $avatar-size / 2 - 5px);

        .avatar-img-box {
          height: 75px;
          width: 75px;
          background-image: linear-gradient(145deg, #84D6FC 13%, #FFFFFF 87%);
          padding: 2px;
          box-sizing: border-box;
          border-radius: 50%;
          margin: 0 auto;

          .avatar-img-bg {
            height: 100%;
            width: 100%;
            border-radius: 50%;
            background-image: linear-gradient(328deg, #0030F9 13%, #84D6FC 84%);

            .avatar-img {
              height: 48px;
              width: 48px;
            }
          }
        }

        .avatar-footer {
          width: calc($avatar-size + 10px);
          height: 40px;
          background-color: #fff;
          position: relative;
          top: -30px;
          clip-path: path('M 0 0 L 0 5 L 5 -7.5 Q 5 40, 52.5 40 Q 100 40, 100 -7.5 L 100 0 L 105 0 L 105 40 L 0 40 L 0 0 Z');
        }
      }

      .my-card {
        height: 100%;
        min-height: 440rpx;
        padding: 16rpx;
        box-sizing: border-box;
        clip-path: polygon(
            0 0,
            calc(50% - $avatar-size / 2) 0,
            calc(50% - $avatar-size / 2) calc($avatar-size / 2),
            calc(50% + $avatar-size / 2) calc($avatar-size / 2),
            calc(50% + $avatar-size / 2) 0,
            100% 0,
            100% 100%,
            0 100%,
            0 0
        );

        .my-card__inner {
          width: 100%;
          height: 100%;
          background-color: #fff;
          box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.05);
          border-radius: 24rpx;
          padding: 32rpx 30rpx 60rpx;
          box-sizing: border-box;

          .oa-logout {
            .oa-logout-image {
              width: 36rpx;
              height: 36rpx;
            }
          }

          .oa-username-display {
            font-size: 44rpx;
            font-weight: bold;
            line-height: normal;
            letter-spacing: 0em;
            color: #333333;
            text-align: center;
            margin-top: 40rpx;
          }

          .oa-username-account {
            font-size: 32rpx;
            font-weight: normal;
            line-height: normal;
            text-transform: lowercase;
            letter-spacing: 0em;
            color: #333333;
            text-align: center;
            margin-top: 12rpx;
          }

          .oa-user-info {
            overflow: auto;

            .oui-row {
              border-bottom: 1px solid #F1F1F1;
              padding: 40rpx 0 36rpx;

              .oui-label {
                font-size: 32rpx;
                font-weight: normal;
                line-height: normal;
                text-transform: lowercase;
                letter-spacing: 0em;
                color: #999999;

                .oui-label-icon {
                  width: 48rpx;
                  height: 48rpx;
                  margin-right: 24rpx;
                }
              }

              .oui-value {
                font-size: 32rpx;
                font-weight: normal;
                line-height: normal;
                text-transform: lowercase;
                letter-spacing: 0em;
                color: #333333;
                @include text-overflow(1);
              }
            }
          }
        }
      }
    }

    .current-sys {
      color: #BBBBBB;
      font-size: 28rpx;
      margin-top: 36rpx;
      text-align: center;
    }
  }
}
</style>
